<!-- 新增单选页面 -->
<template>
  <div class="multipChoice">
    <el-container>
      <el-container>
        <!-- 左侧 -->
        <el-aside style="width: 50%">
            <el-form :model="multipChoiceForm" ref="multipChoiceForm" label-width="80px">
                <el-form-item label="题干" prop="name" >
                    <el-input
                        v-model="multipChoiceForm.name"
                        placeholder="请输入内容"
                        label-position="left"
                        style="width: 100%"
                        suffix-icon="el-icon-plus"
                    ></el-input>
                </el-form-item>
                <!-- 选项区域 -->
                <el-form-item label="选项" >
                    <!-- 默认区域 -->
                    <el-form-item
                        v-for="(option, index) in multipChoiceForm.options"
                        :key="option.key"
                        :prop="'options.' + index + '.value'"
                        style="margin-bottom: 5%"
                        >
                        <div>
                            <el-tag v-text="option.mappingOption">C</el-tag>
                            <span>&emsp;</span>
                            <el-input
                            v-model="option.value"
                            placeholder="请输入内容"
                            label-position="left"
                            style="width: 85%"
                            suffix-icon="el-icon-plus"
                            ></el-input>
                        </div> 
                    </el-form-item>
                    <!-- 动态选项区域 -->
                    <el-form-item
                        v-for="(option, index) in multipChoiceForm.options2"
                        :key="option.key"
                        :prop="'options2.' + index + '.value'"
                        style="margin-bottom: 5%"
                        >
                        <div>
                            <el-tag v-text="option.mappingOption">E</el-tag>
                            <span>&emsp;</span>
                            <el-input
                            v-model="option.value"
                            placeholder="请输入内容"
                            label-position="left"
                            style="width: 75%"
                            suffix-icon="el-icon-plus"
                            ></el-input>
                            <el-button type="danger" icon="el-icon-close" size="mini" circle @click.prevent="removeOption(option)"></el-button>
                        </div> 
                    </el-form-item>
                </el-form-item>
                <!-- 标答区域 -->
                <el-form-item label="标答" prop="radio">
                    <el-radio-group v-model="multipChoiceForm.radio" >
                        <!-- 默认区域 -->
                        <el-radio
                            v-for="answer in theAnswer"
                            :label="answer.num"
                            :key="answer.key"
                            >
                            <span v-text="answer.tag"></span>
                        </el-radio>
                        <!-- 动态标答区域 -->
                        <el-radio
                            v-for="answer2 in theAnswer2"
                            :label="answer2.num"
                            :key="answer2.key"
                            >
                            <span v-text="answer2.tag"></span>
                            <!-- <el-button type="danger" icon="el-icon-close" size="mini" circle @click.prevent="removeOption(answer2)"></el-button> -->
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 疑惑解析 -->
                <el-form-item label="解析" prop="analysis" >
                    <el-input
                        v-model="multipChoiceForm.analysis"
                        placeholder="请输入内容"
                        label-position="left"
                        style="width: 100%"
                        suffix-icon="el-icon-plus"
                    ></el-input>
                </el-form-item>
                <!-- 分值 -->
                <el-form-item label="分值" prop="num" >
                    <el-input-number 
                        v-model="multipChoiceForm.num"
                        label-position="left"
                        controls-position="right" 
                        style="width: 100%"
                        :min="1" 
                        :max="10"
                    ></el-input-number>
                </el-form-item>
                <!-- 难度 -->
                <el-form-item label="难度" prop="difficulty" >
                    <div class="block" style="padding-top: 2.9%;margin-right: 10%;">
                        <el-rate v-model="multipChoiceForm.difficulty"></el-rate>
                    </div>
                </el-form-item>
                <!-- 操作区域 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="onResetFrom('multipChoiceForm')">重置</el-button>
                    <el-button type="primary" @click="onCreateMutipleChoice">添加选项</el-button>
                </el-form-item>
            </el-form>
        </el-aside>
        <!-- 右侧 -->
        <el-main style="width: 50%;padding: 0%;">
            <el-form :model="multipChoiceForm" ref="multipChoiceForm" label-width="80px">
                <el-form-item label="题干" prop="name" >
                    <span 
                        v-text="multipChoiceForm.name"
                        label-position="left"
                        style="width: 100%"
                    ></span>
                </el-form-item>
                <!-- 选项区域 -->
                <el-form-item label="选项" >
                    <!-- 默认区域 -->
                    <el-form-item
                        v-for="(option, index) in multipChoiceForm.options"
                        :key="option.key"
                        :prop="'options.' + index + '.value'"
                        style="margin-bottom: 5%"
                        >
                        <div>
                            <span v-text="option.mappingOption">C</span>
                            <span>&emsp;</span>
                            <span
                                v-text="option.value"
                                label-position="left"
                                style="width: 85%"
                            ></span>
                        </div> 
                    </el-form-item>
                    <!-- 动态选项区域 -->
                    <el-form-item
                        v-for="(option, index) in multipChoiceForm.options2"
                        :key="option.key"
                        :prop="'options2.' + index + '.value'"
                        style="margin-bottom: 5%"
                        >
                        <div>
                            <span v-text="option.mappingOption">E</span>
                            <span>&emsp;</span>
                            <span
                                v-text="option.value"
                                placeholder="请输入内容"
                                label-position="left"
                                style="width: 75%"
                            ></span>
                        </div> 
                    </el-form-item>
                </el-form-item>
                <!-- 标答区域 -->
                <el-form-item label="标答" prop="radio">
                    <el-radio-group v-model="multipChoiceForm.radio" >
                        <!-- 默认区域 -->
                        <el-radio
                            v-for="answer in theAnswer"
                            :label="answer.num"
                            :key="answer.key"
                            disabled
                            >
                            <span v-text="answer.tag"></span>
                        </el-radio>
                        <!-- 动态标答区域 -->
                        <el-radio
                            v-for="answer2 in theAnswer2"
                            :label="answer2.num"
                            :key="answer2.key"
                            disabled
                            >
                            <span v-text="answer2.tag"></span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 疑惑解析 -->
                <el-form-item label="解析" prop="analysis" >
                    <span
                        v-text="multipChoiceForm.analysis"
                        placeholder="请输入内容"
                        label-position="left"
                        style="width: 100%"
                        suffix-icon="el-icon-plus"
                    ></span>
                </el-form-item>
                <!-- 分值 -->
                <el-form-item label="分值" prop="num" >
                    <span
                        v-text="multipChoiceForm.num"
                        label-position="left"
                        controls-position="right" 
                        style="width: 100%"
                        :min="1" 
                        :max="10"
                    ></span>
                </el-form-item>
                <!-- 难度 -->
                <el-form-item label="难度" prop="difficulty" >
                    <div class="block" style="padding-top: 2.9%;margin-right: 10%;">
                        <el-rate v-model="multipChoiceForm.difficulty" disabled></el-rate>
                    </div>
                </el-form-item>
            </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
        // 表单数据
        multipChoiceForm: {
            // 题干
            name: "",
            // 默认选项区域
            options: [
                {
                    mappingOption: 'A',
                    value: ''
                },
                {
                    mappingOption: 'B',
                    value: ''
                },
                {
                    mappingOption: 'C',
                    value: ''
                },
                {
                    mappingOption: 'D',
                    value: ''
                },
            ],
            // 动态选项
            options2: [],
            // 标答
            radio: 2,
            // 解析
            analysis: '',
            // 分值
            num: 1,
            // 难度
            difficulty: 1
        },
        // 动态新增选项区域标签
        addOptions2: {
            letters: [
                'E','F','G','H'
            ],
            // 记录当前选项标签索引
            addNum: 0,
            // 标答值
            saveNum: [
                4,5,6,7
            ],
            // 标答标签索引
            addSaveNum: 0,
        },
        // 默认标答区域
        theAnswer: [
            {
                tag: 'A',
                num: 0
            },
            {
                tag: 'B',
                num: 1
            },
            {
                tag: 'C',
                num: 2
            },
            {
                tag: 'D',
                num: 3
            }
        ],
        // 动态标答区域
        theAnswer2: []
    
    };
  },
  methods: {
    //   提交表单
    onSubmit() {
        // 将表单数据转化为JSON格式
        var json = JSON.stringify(this.multipChoiceForm);
        alert(json);
    },
    // 新增单选列和标答
    onCreateMutipleChoice() {
        // 初始长度默认4
        var length = this.multipChoiceForm.options.length;
        // 动态的选项长度
        var length2 = this.multipChoiceForm.options2.length+1;
        length2 = length2+length;
        if(length2 > 6) {
            this.$message({
                showClose: true,
                message: '最多支持6个选项哦！',
                type: 'warning'
            });
            return;
        }
        // 新增选项区域
        this.multipChoiceForm.options2.push({
           mappingOption: this.addOptions2.letters[this.addOptions2.addNum],
           value: '',
           key: Date.now()
        });
        this.addOptions2.addNum++;
        // 新增标答区域
        this.theAnswer2.push({
           tag: this.addOptions2.letters[this.addOptions2.addSaveNum],
           num: this.addOptions2.saveNum[this.addOptions2.addSaveNum],
           key: Date.now()
        });
        this.addOptions2.addSaveNum++;
    },
    // 重置表单数据
    onResetFrom(formName) {
        // 重置必须使用prop标签否则无效
        this.$refs[formName].resetFields();
        // 重置data中的某个Form表单
        // console.log(formName);
        // this.multipChoiceForm = this.$options.data().multipChoiceForm;
    },
    // 删除选项
    removeOption(item) {
        // 删除选项
        var index = this.multipChoiceForm.options2.indexOf(item)
        if (index !== -1) {
          this.multipChoiceForm.options2.splice(index, 1)
          this.addOptions2.addNum--;
        //   对动态选项区域数组进行标签顺序排列
            const length = this.addOptions2.addNum;
            for(var i = 0;i < length;i++) {
                this.multipChoiceForm.options2[i].mappingOption = this.addOptions2.letters[i],
                this.multipChoiceForm.options2[i].value = this.multipChoiceForm.options2[i].value
            }
            // 删除动态标答区域
          this.theAnswer2.splice(index, 1)
          this.addOptions2.addSaveNum--;
        //   对动态标答区域数组进行标签顺序排列
            const length2 = this.addOptions2.addSaveNum;
            for(var i2 = 0;i2 < length2;i2++) {
                this.theAnswer2[i2].tag = this.addOptions2.letters[i2],
                this.theAnswer2[i2].num = this.theAnswer2[i2].num
            }

        }
        // 删除动态标答区域
        // var index2 = this.theAnswer2.indexOf(item)
        // if (index2 !== -1) {
        //   this.theAnswer2.splice(index2, 1)
        //   this.addOptions2.addSaveNum--;
        // }
    }
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.s{
    margin-bottom: 5%;
    margin: 0%;
}
</style>
